<template>
  <div class="headNav fix">
    <div class="img" @click="headBack"></div>
    <div class="centerTitle ell" v-text="centerTitle"></div>
    <div class="rightTitle" v-text="rightTitle" @click="rightClick"></div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  .img{
    width: 1.7rem;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
    float: left;
  }

  .headNav {
    width: 100%;
    display: flex;
    z-index: 9;
    position: fixed;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(70, 161, 187, 1);
    background-size: cover;
    height: 2.2rem;
    padding: 0 .75rem;
     >.img {
      height: 2.2rem;
      flex: 0 0 30%;
      position: relative;
      float: left;
      }
     >.centerTitle {
      position: relative;
      flex: 1;
      color: white;
      font-size: .8rem;
      text-align: center;
      line-height: 2.2rem;
     }
    >.rightTitle{
      font-size: .8rem;
      flex: 0 0 30%;
      text-align: right;
      line-height: 2.2rem;
      height: 2.2rem;
      color: white;
    }
}
</style>
<script>

  export default{
    props: ['centerTitle', 'rightTitle'],
    data(){
      return {
      }
    },
    methods: {
      headBack(){
        /*console.log(this.$router.from)*/
        this.$emit('headBack');
        /*this.$router.push({
          name: this.$store.state.headNav.back,
          params:{
            parameter:this.$store.state.headNav.mainIndexparameter,
          }
        });*/
  //      this.$router.go(-1)
      },
      rightClick(){
        this.$emit('rightClick');
      }
    }

  }
</script>
